<template>
  <div class="menu_checks_box" v-if="menuData && menuData.length">
    <dl class="check_dl">
      <dt>{{ title ? title : "商品类目" }}</dt>
      <dd :class="[{ overstep: isOverstep }, { is_unfold: isUnfold }]">
        <template v-for="item in menuData">
          <div
            class="check_item"
            :key="'menuChecks' + item.id"
            :class="{ active: item.isChecked }"
            @click="clickMenuFn(item)"
          >
            <el-popover
              placement="bottom-start"
              :close-delay="100"
              trigger="hover"
              :disabled="item.id == '0' || !showChild"
              :popper-options="{
                removeOnDestroy: true
              }"
              @show="popoverShow(item.id)"
              :ref="'menuPopover' + item.id"
              popper-class="mypopover"
            >
              <i slot="reference">{{ item.categoryName }}</i>
              <!-- <el-button slot="reference">click 激活</el-button> -->
              <el-cascader-panel
                :options="item.sublist"
                :props="optionProps"
                v-model="checkedDatas"
                @expand-change="elPanelFn(item.id)"
                @change="checkedChangeFn(item.id)"
              ></el-cascader-panel>
            </el-popover>
          </div>
        </template>
        <i @click="unfoldFn" class="unfoldFn" v-if="!isOverChild">
          {{
          isUnfold ? "收起" : "展开"
          }}
        </i>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  name: 'menu_checks',
  // props: ["checkedDatasParent", "title","showChild"],
  props: {
    checkedDatasParent: Object, //绑定的对象
    title: String, //名称
    showChild: {
      //  是否展示二三级分类
      type: Boolean,
      default: true,
    },
    isOverChild: Boolean,
  },
  data() {
    return {
      optionProps: {
        //多选对应字段配置
        value: 'id',
        label: 'categoryName',
        children: 'sublist',
        multiple: true,
        expandTrigger: 'hover',
      },
      menuData: [], //分类数据
      countMenuProject: null, //选中的菜单实例
      pId: '0', //父级分类id
      checkedDatas: [], //选中的二级分类集合
      isOverstep: false, //是否超出（初始化）
      isUnfold: false, //是否展示
      checkedObj: null, //点击以及分类选中的当前对象
    }
  },
  model: {
    prop: 'checkedDatasParent',
    event: 'returnBack',
  },
  created() {
    this.initDataList() //初始化选中项
  },
  methods: {
    unfoldFn() {
      this.isUnfold = !this.isUnfold
    },
    setCondition() {
      this.$nextTick(() => {
        let box = this.$refs.ovBox
        if (!box) return
        let childBox = this.$refs.ovChild
        let boxHeight = box.offsetHeight
        let childBoxHeight = childBox.offsetHeight
        if (boxHeight < childBoxHeight) {
          this.isOverstep = true
        }
      })
    },
    initDataList() {
      //初始化选中项
      let mData = this.$store.state.goodsKindArrNew
      if (mData.length) {
        this.menuData = this.initChecked(mData)
        this.$forceUpdate() //强刷视图
        // console.log(this.menuData);
      }
    },
    initChecked(arrPms) {
      //初始化筛选函数，需要单独再赋值 this.menuData = this.initChecked(mData);
      let arr = arrPms ? arrPms : this.menuData
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i]
        item.isChecked = !i
        // initData(item);
      }
      // function initData(arr){  //递归初始化值
      //   if(arr.sublist){
      //     for(let i=0;i<arr.sublist.length;i++){
      //       let itemC = arr.sublist[i];
      //       itemC.isChecked = false;
      //       console.log(++a);
      //       initData(itemC);
      //     }
      //     // arr.sublist.forEach((itemC,idx)=>{
      //     //   console.log(++a);
      //     //   itemC.isChecked = false;
      //     //   initData(itemC);
      //     // });
      //   }
      // }
      return arr
    },
    checkedChangeFn(pId) {
      //下拉菜单选中事件
      this.pId = pId
      let data = this.checkedDatas

      if (data.length) {
        this.menuData.forEach((item, idx) => {
          //只能选中一个一级分类
          item.isChecked = this.pId == item.id
        })
      }
      this.$emit('returnBack', {
        childIds: this.checkedDatas,
        parentId: this.pId,
      })
      this.$forceUpdate() //强刷视图
    },
    popoverShow(idNum) {
      //获取当前菜单的实例
      this.countMenuProject = this.$refs['menuPopover' + idNum][0]
    },
    elPanelFn(pId) {
      //重新计算popover的位置，防止菜单展开后显示不全
      this.pId = pId
      this.$nextTick(() => {
        this.countMenuProject.updatePopper()
      })
    },
    clickMenuFn(item) {
      //点击一级菜单按钮
      if (this.checkedObj == item) return
      this.checkedObj = item
      if (this.pId != item.id) {
        this.checkedDatas = []
      }
      this.pId = item.id
      this.menuData.forEach((itemC, idx) => {
        itemC.isChecked = itemC == item
      })

      console.log()
      this.$emit('returnBack', {
        childIds: this.checkedDatas,
        parentId: this.pId,
      })
      this.$forceUpdate() //强刷视图
    },
  },
  computed: {},
  watch: {
    checkedDatasParent(oData) {
      if (!oData.parentId) {
        //如果选择全部或者重置
        this.initDataList() //初始化选中项
        this.checkedDatas = [] //清空二级菜单选中状态
      }
    },
    isOverChild() {
      console.log(this.isOverChild)
    },
  },

  destroyed() {
    this.countMenuProject = null
  },
}
</script>
<style lang="less" scoped>
.menu_checks_box {
  margin: 0 0 5px;
}
.check_dl {
  position: relative;
  display: flex;
  dt {
    font-size: 14px;
    line-height: 32px;
    white-space: nowrap;
    color: #888888;
    margin-right: 22px;
  }
  dd {
    display: flex;
    flex-wrap: wrap;
    height: 39px;
    overflow: hidden;

    .check_item {
      cursor: pointer;
      outline: none;
      height: 36px;
      border-radius: 4px;
      font-size: 14px;
      color: #555555;
      line-height: 36px;
      margin-bottom: 7px;

      box-sizing: border-box;
      position: relative;
      i {
        display: inline-block;
        line-height: 36px;
        padding: 0 19px;
        font-style: normal;
      }
      &:hover {
        color: #ff924b;
      }
      &.active {
        color: #ff924b;
        background-color: #fff1e8;
      }
    }

    &.overstep {
      padding-right: 22px;
      .cg_items {
        i {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    &.is_unfold {
      padding-right: 0;
      height: inherit;

      i {
        position: relative;
        line-height: 20px;
      }
    }
  }

  .unfoldFn {
    position: absolute;

    right: 0;
    top: 6px;
    font-size: 14px;
    font-style: normal;
    color: #ff924b;
    cursor: pointer;
  }
}
.menu_checks_item_box {
  padding: 0 !important;
  width: initial !important;
  transition: all linear 300ms;
  margin-top: 6px !important;
  .is-focus .el-checkbox__inner {
    border-color: #fd7f2c !important;
  }
}
</style>
<style lang="css">
.mypopover {
  padding: 0px;
}
</style>
